<template>
	<view class="certmain">
		<uni-nav-bar shadow title="茶会定制" @clickLeft="" height="88rpx" :border="false" :fixed="true" backgroundColor="#FFFFFF"
			:shadow="false" left-icon="left"></uni-nav-bar>
		<view class="container">
			<view class="teainfo" v-for="(i,index) in AllList" :key="index">
				<view class="teatitle">
					<text class="t1">{{i.name}}</text>
					<text class="t2" v-show="i.tea.length>0">更多></text>
				</view>
				<view class="teacon" v-show="i.tea.length>0">
					<view class="tealeft" v-for="(item,n) in  i.tea" @tap="$wanlshop.on('/pages/teacher/TeaMainInfo?id='+item.id)">
						<view class="timg">
							<image :src="item.image" mode=""></image>
						</view>
						<text class="tt1">{{item.name}}</text>
						<view class="tinfo">
							<view>
								<text class="yan" style="width: 24rpx;">
									<image style="width: 24rpx;" src="@/static/images/index/yan.png" mode=""></image>
								</text>
								<text>{{item.show_number}}</text>
								<text class="san">
									<image  src="@/static/images/index/san.png" mode="">
										<!-- <wanl-share
											:scrollAnimation="scrollAnimation" 
											:shareTitle="item.orderGoods.title"
											:shareText="" 
											:image="$wanlshop.oss(data.orderGoods.image,50, 50)"
											:href="common.appConfig.domain + '/pages/apps/groups/goods?id='"
											isReport 
											@change="wanlShare" 
										/>
										 -->
									</image>
								</text>
							</view>
							<text @click.stop='toBookTea(item)' class="yy">预定茶会</text>
						</view>
					</view>
				</view>
				<view v-show="i.tea.length==0" style="text-align: center;  margin: 20rpx;" class="">
						暂无内容
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				idcard: '',
				AllList:[]
			}
		},
		onReady() {
				this.cx()
		},
		methods: {
			cx() {
			
				this.$api.get({
					url: '/tea/lis?limit=4',
					success: res => {
						console.log(res)
						this.AllList = res.list
					},
					fail: error => {
						console.log(error)
					}
				})
			},
			toBookTea(item){
				uni.navigateTo({
					url:'/pages/teacher/BookTea',
					
				})
			},
			// 分享回调
			wanlShare(e) {
				if (e) {
					this.$wanlshop.auth(`/pages/user/complaint/complaint?id=${this.goodsData.id}&type=3`);
				} else {
					this.modalName = null;
				}
			}
		}
	}
</script>

<style lang="scss">
	.certmain {
	
		
		    width: 100%;
		    background-color: #FFFFFF;
		    padding-bottom: 40rpx;

		/deep/.uni-nav-bar-text {
			font-size: 36rpx;
			color: #333333;
			font-weight: 800;
		}

		.container {
			.teainfo {
				padding: 0 30rpx;

				.teatitle {
					display: flex;
					justify-content: space-between;
					margin-top: 30rpx;

					.t1 {
						font-size: 32rpx;
						font-weight: bold;
					}

					.t2 {
						font-size: 20rpx;
						font-weight: 400;
						color: #777777;
					}
				}

				.teacon {
					display: flex;
					justify-content: space-between;
					margin-top: 30rpx;
					flex-wrap: wrap;
					height: 300rpx;
					// overflow: hidden;
					.tealeft,
					.tearight {
						width: 336rpx;
						height: 300rpx;
						background: rgba(255, 255, 255, 0.39);
						box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
						opacity: 1;
						
						.timg {
								
							image{
								width: 316rpx;
								height: 176rpx;
							}
							width: 316rpx;
							height: 176rpx;
							// background-color: pink;
							margin: 0 auto;
							margin-top: 10rpx;
						}

						.tt1 {
							display: block;
							margin-left: 10rpx;
							margin-top: 16rpx;
							font-size: 28rpx;
							color: #333333;
							font-weight: 400;
						}

						.tinfo {
							display: flex;
							justify-content: space-between;
							padding: 0 10rpx;
							margin-top: 14rpx;

							.yan,
							.san {
								display: inline-block;
								width: 16rpx;
								height: 20rpx;

								image {
									width: 100%;
									height: 100%;
								}
							}

							.san {
								margin-left: 30rpx;
							}

							.yy {
								width: 100rpx;
								height: 36rpx;
								font-size: 22rpx;
								color: #FFFFFF;
								background: rgba(231, 186, 119, 1);
								text-align: center;
								padding: 3rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
